<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/16
  Time: 16:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<script src="${pageContext.request.contextPath}/static/layui/layui.all.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script type="text/html" id="btnDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<div id="modleBox" style="display: none; margin: auto">
    <form action="/adress/add" method="post">
        用户信息:<input type="text" name="ainfo"><br>
        地址信息:<input type="text" name="aname"><br>
        电话:<input type="text" name="atel"><br>
        <fieldset class="layui-elem-field site-demo-button" style="margin: auto; border: solid 0px">
            <div style="margin-left: 160px">
                <button type="submit" class="layui-btn layui-btn-normal">提交</button>
            </div>
        </fieldset>
    </form>
</div>
<script type="text/javascript">
    var tableRold;
    layui.use('table', function () {
        var table = layui.table;
        //执行渲染
        tableRold=table.render({
            page: true,
            url: '/goods/all'
            , elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
            ,toolbar: '#btnDemo'
            , width: 1000 //容器高度
            , cols: [[ //标题栏
                {checkbox: true, fixed: true}
                ,{field: 'aid', title: 'ID', width: 80}
                , {field: 'ainfo', title: '用户信息', width: 120,edit:'text'}
                , {field: 'aname', title: '地址', width: 120,edit:'text'}
                , {field: 'atel', title: '电话', width: 120,edit:'text'}
                ,{field:'right', title: '操作', width:200,align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
            ,page: true//设置表头
            //,…… //更多参数参考右侧目录：基本参数选项
        });
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                $.ajax({
                    type: "post",
                    url: "/adress/update",
                    data: {
                        aid:data.aid,
                        ainfo:data.ainfo,
                        aname:data.aname,
                        atel:data.atel,

                    },
                    success: function (msg) {
                        alert(msg.msg);
                        tableRold.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }})
                    },
                    dataType:'json'
                });
            }else if(obj.event === 'del'){

                var id=data.aid;
                $.ajax({
                    type:"get",
                    url:"/adress/delete/"+id,
                    /*data:id,*/
                    success:function (msg) {
                        alert("删除成功");
                        tableRold.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    },
                    dataType:"json"

                })
            }
        });
        /*table.on('checkbox(test)', function(obj){
         alert(obj.data.uid);
         })*/
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            /*alert(data.uid);*/
            if(obj.event === 'del'){
                var idArry=data[0].aid;
                for(var i=1;i<data.length;i++){
                    idArry+=","+data[i].aid;
                }
                alert(idArry);
                $.ajax({
                    type:"GET",
                    url:"/adress/delete",
                    data:idArry,
                    success:function (mess) {
                        //window.location=mess;

                    }
                });
            }else if(obj.event === 'add'){
                layui.use(['layer'],function () {
                    var layer = layui.layer,$=layui.$;
                    layer.open({
                        type: 1
                        ,area:['400PX','300PX']
                        , content: $('#modleBox')
                        , btnAlign: 'c' //按钮居中
                        , shade: 0 //不显示遮罩
                        ,zIndex:layer.zIndex
                        , yes: function () {
                            layer.closeAll();
                        }
                    });
                });
            }
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        }); alert(data[i].id);
    });

</script>
</body>
</html>
